ガント

ガントビューによるグループ化方式を使用すると、階層関係を視覚的に表示できます。ガントビューでは、開始日と終了日を分かりやすく表示できます。これにより、日単位、週単位、月単位、または年単位で、タスクと成果物をタイムスケールに基づいて管理できます。

ガントビューによるグループ化方式を実装するには、次の手順を実行します。

サンプルコード

1. DataView参照の後に、次の参照を追加します。

   <link rel="stylesheet" href="[Your Script Path]/gc.spread.views.gantt.10.0.0.css">
   <script src="[Your Script Path]/gc.spread.views.gantt.10.0.0.min.js" type="text/javascript"></script>
       <script src="data/ganttEvent.js" type="text/javascript"></script>

2. bodyタグ内にdivタグを追加して、ページ内のコンテナとしてDOM要素を含めます。

   <div id="grid1" style="height:100%"></div><template id="popupTemplate" style="display: none">
       <div class="dialog-body">
           <div>
               <div class="dialog-ids">
                   <div class="dialog-header">start date:</div>
                   <input type="date" class="dialog-content" data-column="start" />
               </div>
               <div class="dialog-ids" style="margin-left:40px">
                   <div class="dialog-header">end date:</div>
                   <input type="date" class="dialog-content" data-column="end" />
               </div>
           </div>
           <div class="dialog-header">description:</div>
           <textarea class="dialog-text" style="height:60px;font-style:italic;" data-column="description"></textarea>
           <div class="dialog-header">resources:</div>
           <textarea class="dialog-text" style="height:28px;" data-column="resources"></textarea>
       </div>
   </template>

3. 列の定義を追加します。

   var columns = [{
               id: 'id',
               caption: 'Id',
               dataField: 'id',
               width: 80
           }, {
               id: 'start',
               caption: 'Start',
               dataField: 'start',
               width: 100,
               dataType: 'date',
               format: 'mmm dd,yyyy'
           }, {
               id: 'end',
               caption: 'End',
               dataField: 'end',
               width: 100,
               dataType: 'date',
               format: 'mmm dd,yyyy'
           }, {
               id: 'gantt',
               ganttColumn: {
                   timeLineScale: 'month',
                   scale: 300,
                   start: 'start',
                   end: 'end',
                   text: 'description'
               },
               width: '*'
           }, {
               id: 'description',
               caption: 'Description',
               dataField: 'description',
               visible: false
           }, {
               id: 'resources',
               caption: 'Resources',
               dataField: 'resources',
               visible: false
           }, {
               id: 'predecessorID',
               caption: 'predecessorID',
               dataField: 'predecessorID',
               visible: false,
               allowEditing: false
           }, {
               id: 'parentID',
               caption: 'parentID',
               dataField: 'parentID',
               visible: false,
               allowEditing: false
       }];

4. DIVタグのグリッドIDを呼び出し、コードを初期化します。

   var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
               colHeaderHeight: 48,
               rowHeight: 48,
               allowEditing: true,
               editRowTemplate: '#popupTemplate',
               editMode: 'popup',
               hierarchy: {
                   keyField: 'id',
                   parentField: 'parentID',
                   collapsed: false,
                   column: 'id',
                   footer: {
                       visible: false
                   }
               }
       }));